<template>
  <div class="login">
    <div class="container">
      <a href="/index">
        <img src="/imgs/mi-home.png" alt="">
      </a>
    </div>
    <div class="wrapper">
      <div class="container">
        <div class="login-form">
          <h3>
            <span class="checked">帐号{{ type === 'login' ? '登录' : '注册' }}</span>
          </h3>
          <div v-if="type == 'login'" class="login-body login">
            <el-form @submit.native.prevent="onSubmit">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="username" placeholder="用户名"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="password" type="password" placeholder="密码"></el-input>
              </el-form-item>
              <div style="margin: 16px;">
                <el-button round block type="primary" native-type="submit">登录</el-button>
                <div class="link-register" @click="toggle('register')">立即注册</div>
              </div>
            </el-form>
          </div>
          <div v-else class="login-body register">
            <el-form @submit.native.prevent="onSubmit">
              <el-form-item label="用户名" prop="username1">
                <el-input v-model="username1" placeholder="用户名"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password1">
                <el-input v-model="password1" type="password" placeholder="密码"></el-input>
              </el-form-item>
              <div style="margin: 16px;">
                <el-button round block type="primary" native-type="submit">注册</el-button>
                <div class="link-login" @click="toggle('login')">已有账号，去登录</div>
              </div>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { login, register } from '../service/user'
import { setLocal } from '../util'
import { md5 } from 'js-md5';

export default {
  data() {
    return {
      username: '18567718779',
      password: '123456',
      username1: '',
      password1: '',
      type: 'login',
    }
  },
  methods: {
    toggle(v) {
      this.type = v
    },
    async onSubmit() {
      if (this.type == 'login') {
        const { data, resultCode, message } = await login({
          "loginName": this.username,
          "passwordMd5": md5(this.password)
        })
        if(resultCode === 200) {
          setLocal('token', data)
          this.$message.success(`登录成功！`)
          this.$router.push({ path: 'index'})
        }
      } else {
        await register({
          "loginName": this.username1,
          "password": this.password1
        })
        this.$message.success('注册成功')
        this.type = 'login'
      }
    }
  },
}
</script>
<style lang='less' scoped>
.login{
  &>.container{
    height: 50px;
    margin: 50px;
    
    img {
      width:auto;
      height:100%;
    };
  }

  .el-button {
  background-color: #1baeae;
  color:#ffffff;
  width:100%;
  line-height:20px;
  margin-top:10px;
  font-size:16px;
  height: 50px;
  }
  .wrapper{
    background:url('/imgs/login-bg.jpg') no-repeat center;
    position: relative;
    .container{
      height:576px;
      .login-form{
        box-sizing: border-box;
        padding-left: 31px;
        padding-right: 31px;
        width:410px;
        height:510px;
        background-color:#ffffff;
        position:absolute;
        bottom:29px;
        right: 300px;
        h3 {
          line-height:23px;
          font-size:24px;
          text-align:center;
          margin:40px auto 49px;
          .checked{
            color:#1baeae;
          }
          .sep-line{
            margin:0 32px;
          }
        }
        .input{
          display:inline-block;
          width:348px;
          height:50px;
          border:1px solid #E5E5E5;
          margin-bottom:20px;
          input{
            width: 100%;
            height: 100%;
            border: none;
            padding: 18px;
          }
        }
        .btn{
          width:100%;
          line-height:50px;
          margin-top:10px;
          font-size:16px;
        }
        .tips{
          margin-top:14px;
          display:flex;
          justify-content:space-between;
          font-size:14px;
          cursor:pointer;
          .sms{
            color:#1baeae;
          }
          .reg{
            
            color:#999999;
            span{
              margin:0 7px;
            }
          }
        }
      }
    }
}
.login {
    .logo {
      width: 120px;
      height: 120px;
      display: block;
      margin-bottom: 80px auto 0px;
    }
    .login-body {
      padding: 0 20px;
    }
    .login {
      .link-register {
        cursor:pointer;
        font-size: 14px;
        margin-top: 20px;
        color:#999999;
        display: inline-block;
      }
    }
    .register {
      
      .link-login {
        cursor:pointer;
        font-size: 14px;
        margin-top: 20px;
        color: #999999;
        display: inline-block;
      }
    }
    .verify-bar-area {
      margin-top: 24px;
      .verify-left-bar {
        border-color: #1baeae;
      }
      .verify-move-block {
        background-color: #1baeae;
        color: #fff;
      }
    }
    .verify {
      >div {
        width: 100%;
      }
      display: flex;
      justify-content: center;
      .cerify-code-panel {
        margin-top: 16px;
      }
      .verify-code {
        width: 40%!important;
        float: left!important;
      }
      .verify-code-area {
        float: left!important;
        width: 54%!important;
        margin-left: 14px!important;
        .varify-input-code {
          width: 90px;
          height: 38px!important;
          border: 1px solid #e9e9e9;
          padding-left: 10px;
          font-size: 16px;
        }
        .verify-change-area {
          line-height: 44px;
        }
      }
    }
  }
}
</style>